<template>
  <div class="product-form">
    <div class="go-home" @click="goHome">
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>

    <!-- 标题部分 -->
    <div class="step-title">
      <span class="step-index" :style="{ '--theme': theme }">Step2: </span>
      <span>产品基本信息</span>
    </div>

    <!-- 产品基础信息 -->
    <el-form
      ref="productForm"
      :model="form"
      label-width="150px"
      label-position="top"
      class="form-container"
    >
      <div class="info-section">
        <div class="section-title" :style="{ '--theme': theme }">产品基础信息</div>

        <el-row gutter="18">
          <el-col :span="6">
            <el-form-item label="产品分类" required>
              <el-select v-model="form.productCategory" placeholder="请选择">
                <el-option
                  label="制造业 / 其他制造业"
                  value="制造业/其他制造业"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品产地" required>
              <el-select v-model="form.productOrigin" placeholder="请选择">
                <el-option
                  label="福建省 / 福州市"
                  value="福建省/福州市"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="产品型号" required>
              <el-input
                v-model="form.productModel"
                placeholder="请输入产品型号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产品净重/单位" required>
              <el-col :span="15">
                <el-input
                  v-model="form.netWeight"
                  placeholder="请输入净重"
                ></el-input>
              </el-col>
              <el-col :span="9">
                <el-select v-model="form.weightUnit" placeholder="请选择单位">
                  <el-option label="Kg" value="Kg"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="分配比例 (%)" required>
              <el-input-number
                v-model="form.allocationRatio"
                :min="0"
                :max="100"
                controls-position="right"
                style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 产品高级信息 -->
      <div class="info-section">
        <div class="section-title" :style="{ '--theme': theme }">产品高级信息</div>

        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="*数据收集开始日期-结束日期" required>
              <el-date-picker
                v-model="form.dateRange"
                type="daterange"
                range-separator=" - "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="*数据收集期内产品产量" required>
              <el-col :span="15">
                <el-input
                  v-model="form.productionQuantity"
                  placeholder="请输入产量"
                ></el-input
              ></el-col>
              <el-col :span="9">
                <el-select v-model="form.quantityUnit" placeholder="请选择单位">
                  <el-option
                    label="个/pie"
                    value="个/pie"
                  ></el-option> </el-select
              ></el-col> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="产品描述">
              <el-input
                type="textarea"
                v-model="form.productDescription"
                placeholder="请输入产品描述"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="公司介绍">
              <el-input
                type="textarea"
                v-model="form.companyIntro"
                placeholder="请输入公司介绍"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="12">
            <el-form-item label="产品图片">
              <el-upload
                class="upload-box"
                action="#"
                multiple
                :show-file-list="false"
                drag
                :auto-upload="false"
              >
                <div class="upload-icon">
                  <i class="el-icon-upload"></i>
                </div>
                <div class="upload-text">上传图片</div>
                <div class="upload-hint">或将文件拖拽至此处</div>
              </el-upload>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="生产工艺流程图">
              <el-upload
                class="upload-box"
                action="#"
                multiple
                :show-file-list="false"
                drag
                :auto-upload="false"
              >
                <div class="upload-icon">
                  <i class="el-icon-upload"></i>
                </div>
                <div class="upload-text">上传图片</div>
                <div class="upload-hint">或将文件拖拽至此处</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 副产品信息 -->
      <div class="info-section">
        <div class="section-title" :style="{ '--theme': theme }">
          <span>副产品信息</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="添加副产品信息"
            placement="top"
          >
            <span @click="addProduct"
              ><el-icon size="20"><CirclePlus /></el-icon
            ></span>
          </el-tooltip>
        </div>
        <el-form
          ref="formRef"
          style="max-width: 100%"
          :model="dynamicForm"
          label-width="auto"
          class="demo-dynamic"
        >
          <!-- 动态农副产品列表 -->
          <div
            v-for="(product, index) in dynamicForm.products"
            :key="product.key"
            class="info-section"
          >
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item
                  :label="'副产品名称'"
                  :prop="'products.' + index + '.byProductName'"
                  :rules="{
                    required: true,
                    message: '请输入副产品名称',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    v-model="product.byProductName"
                    placeholder="请输入副产品名称"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  :label="'副产品产量'"
                  :prop="'products.' + index + '.byProductionQuantity'"
                  :rules="{
                    required: true,
                    message: '请输入产量',
                    trigger: 'blur',
                  }"
                >
                  <el-col :span="15">
                    <el-input
                      v-model="product.byProductionQuantity"
                      placeholder="请输入产量"
                    />
                  </el-col>
                  <el-col :span="9">
                    <el-select
                      v-model="product.byQuantityUnit"
                      placeholder="请选择单位"
                    >
                      <el-option label="kg" value="1" />
                      <el-option label="吨" value="2" />
                      <el-option label="克" value="3" />
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item
                  :label="'分配比例 (%)'"
                  :prop="'products.' + index + '.byAllocationRatio'"
                  :rules="{
                    required: true,
                    message: '请输入分配比例',
                    trigger: 'blur',
                  }"
                >
                  <el-col :span="19">
                    <el-input-number
                      v-model="product.byAllocationRatio"
                      :min="0"
                      :max="100"
                      controls-position="right"
                      style="width: 100%"
                  /></el-col>
                  <el-col :span="5">
                    <span @click="removeProduct(index)" style="cursor:pointer">
                      <el-icon size="20"><Remove /></el-icon> </span
                  ></el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

   
        </el-form>
      </div>
    </el-form>

    <!-- 底部按钮 -->
    <div class="button-container">
      <el-button type="primary" @click="submitForm" :loading="isLoading"
        >保存并下一步</el-button
      >
    </div>
  </div>
</template>
<script setup>
  import { ref, reactive, computed, onMounted } from "vue";
  import useSettingsStore from "@/store/modules/settings";

  import dayjs from "dayjs";

  const emit = defineEmits(["changeModel", "goNav", "saveToNextStep"]);

  const settingsStore = useSettingsStore();
  // 表单数据
  const form = reactive({
    productCategory: "制造业/其他制造业",
    productOrigin: "福建省/福州市",
    productModel: "TY-2024001",
    netWeight: "10",
    weightUnit: "Kg",
    allocationRatio: 100,

    dateRange: [
      dayjs("2024-03-15").format("YYYY-MM-DD"),
      dayjs("2024-04-30").format("YYYY-MM-DD"),
    ],
    productionQuantity: "2000",
    quantityUnit: "个/pie",
    productDescription: "",
    companyIntro: "",

    byProductName: "",
    byProductionQuantity: "",
    byQuantityUnit: "1",
    byAllocationRatio: 100,
  });
  // 动态表单数据
  const dynamicForm = ref({
    products: [],
  });
  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };
  // 添加新产品
  const addProduct = () => {
    dynamicForm.value.products.push({
      key: Date.now(),
      byProductName: "",
      byProductionQuantity: "",
      byQuantityUnit: "1",
      byAllocationRatio: 0,
    });
  };

  // 删除产品
  const removeProduct = (index) => {
    dynamicForm.value.products.splice(index, 1);
  };


  // 日期选择器配置
  const pickerOptions = {
    disabledDate(time) {
      return time < dayjs().subtract(1, "year");
    },
  };

  // 表单提交方法
  const submitForm = () => {
    // 表单验证
    const validateFields = [
      "productCategory",
      "productOrigin",
      "productModel",
      "netWeight",
      "allocationRatio",
      "dateRange",
      "productionQuantity",
      "byProductName",
      "byProductionQuantity",
      "byAllocationRatio",
    ];

    const errors = [];

    validateFields.forEach((field) => {
      if (!form[field]) {
        errors.push(field);
      }
    });

    // if (errors.length > 0) {
    //   ElMessage.error(`请填写以下必填项: ${errors.join(", ")}`);
    //   return;
    // }

    // // 简单的数据验证
    // if (form.netWeight <= 0) {
    //   ElMessage.error("产品净重必须大于0");
    //   return;
    // }

    // if (form.productionQuantity <= 0) {
    //   ElMessage.error("产品产量必须大于0");
    //   return;
    // }

    // if (form.byProductionQuantity <= 0) {
    //   ElMessage.error("副产品产量必须大于0");
    //   return;
    // }

    // if (form.byAllocationRatio <= 0 || form.byAllocationRatio > 100) {
    //   ElMessage.error("副产品分配比例必须在0-100之间");
    //   return;
    // }

    // 模拟保存数据
    console.log("保存的数据:", form);
    emit("saveToNextStep", "two");
    // 提交成功提示
    // ElMessage.success("保存成功，即将进入下一步！");

    // 这里可以添加实际的API调用
    // saveFormData(form).then(() => {
    //   nextStep();
    // });
  };
  //添加父产品信息
  const handleAdd = () => {};
  // 下一步方法模拟
  /**
   * 进入下一步
   *
   * @returns 无
   */
  const nextStep = () => {
    console.log("进入下一步");
  };

  // 初始化加载
  onMounted(() => {
    // 可以在这里进行初始化数据加载
  });
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>
<style lang="scss" scoped>
  /* 整体容器样式 */
  .product-form {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  /* 标题样式 */
  .step-title {
    font-size: 18px;
    color: #6c6c6e;
    margin-bottom: 15px;
    font-weight: 600;
    .step-index {
      color: var(--theme);
    }
  }

  .step-title span {
    font-weight: normal;
  }

  .main-title {
    font-size: 16px;
    color: #333;
    margin: 10px 0 20px;
    font-weight: 500;
  }

  /* 信息区块样式 */
  .info-section {
    margin-bottom: 25px;
  }

  .section-title {
    display: flex;
    gap: 8px;
    font-size: 14px;

    color: var(--theme);
    padding: 8px 0;
    font-weight: 500;
    margin-bottom: 15px;
    border-left: 3px solid var(--theme);
    padding-left: 8px;
    .el-icon {
      cursor: pointer;
    }
  }

  /* 表单样式 */
  .form-container {
    width: 100%;
  }

  .el-form-item {
    margin-bottom: 16px;
  }

  .el-form-item__label {
    color: #333;
    font-weight: 400;
  }

  .el-form-item__content {
    line-height: 1.5;
  }

  /* 输入框通用样式 */
  .el-input__inner {
    border-color: #e4e7ed;
    height: 40px;
    line-height: 40px;
  }

  .el-input-group__append {
    background-color: #fff;
    border: 1px solid #e4e7ed;
    color: #606266;
    padding: 0 10px;
    line-height: 38px;
    border-left: none;
  }

  /* 选择器样式 */
  .el-select {
    width: 100%;
  }

  .el-select-dropdown__item.selected {
    color: #409eff;
  }

  /* 日期选择器样式 */
  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }

  .el-date-editor--daterange .el-input__icon {
    line-height: 32px;
  }

  .el-date-editor--daterange .el-range-separator {
    padding: 0 8px;
    line-height: 32px;
  }

  /* 上传组件样式 */
  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .upload-icon {
    color: #8c939d;
    font-size: 24px;
    margin-bottom: 8px;
  }

  .upload-text {
    color: #8c939d;
    font-size: 14px;
  }

  .upload-hint {
    color: #bbb;
    font-size: 12px;
    margin-top: 5px;
  }

  /* 按钮样式 */
  .button-container {
    margin-top: 30px;
    text-align: right;
  }

  /* 文本域样式 */
  .el-textarea__inner {
    resize: none;
  }
</style>
